<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>Charts</title>
  <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../node_modules/rainbow-code/themes/css/github.css">
  <link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="app.css" rel="stylesheet">
  <style>
    .chart-legend {
      list-style-type: none;
      margin-top: 5px;
      text-align: center;
    /* NOTE: Browsers automatically add 40px of padding-left to all lists, so we should offset that, otherwise the legend is off-center */
      -webkit-padding-start: 0;
    /* Webkit */
      -moz-padding-start: 0;
    /* Mozilla */
      padding-left: 0;
    /* IE (handles all cases, really, but we should also include the vendor-specific properties just to be safe) */
    }
    .chart-legend li {
      display: inline-block;
      white-space: nowrap;
      position: relative;
      margin-bottom: 4px;
      border-radius: 5px;
      padding: 2px 8px 2px 28px;
      font-size: smaller;
      cursor: default;
    }
    .chart-legend li span {
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 20px;
      height: 20px;
      border-radius: 5px;
    }
  </style>
</head>
<body ng-app="examples" id="top">
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="container" ng-controller="MenuCtrl">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" ng-click="isCollapsed = !isCollapsed">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand visible-xs" href="#">Angular Charts</a>
      </div>
      <nav class="hidden-xs">
        <ul class="nav navbar-nav">
          <li>
            <a href="#top" role="button" class="navbar-brand">
              Angular Chart
            </a>
          </li>
          <li class="dropdown">
            <a role="button" class="dropdown-toggle" aria-haspopup="true" aria-expanded="false">
              Directives <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li ng-repeat="chart in charts"><a ng-href="#{{chart | lowercase }}-chart">{{chart}}</a></li>
            </ul>
          </li>
          <li><a href="#getting_started">Getting started</a></li>
          <li><a href="#reactive">Reactive</a></li>
          <li><a href="#mixed">Mixed type charts</a></li>
        </ul>
      </nav>
      <nav class="collapse" collapse="isCollapsed" style="height: 0px;">
        <ul class="nav navbar-nav">
          <li><a href="#getting_started" ng-click="isCollapsed = !isCollapsed">Getting started</a></li>
          <li><a href="#directives" ng-click="isCollapsed = !isCollapsed">Directives</a></li>
        </ul>
      </nav>
    </div>
  </div>
  <div class="container-fluid">
    <div class="text-center aspect-ratio" id="container" ng-controller="TicksCtrl">
      <canvas width='1200' height='300' id="hero-bar" class="chart chart-line" chart-data="data"
              chart-options="options" chart-labels="labels"></canvas>
      <div class="header">
        <h1>
          Angular Chart
        </h1>

        <p>Reactive, responsive, beautiful charts for <a href="http://angularjs.org">AngularJS</a> based on <a href="http://www.chartjs.org">Chart.js</a></p>

        <p>
          <a class="btn btn-default btn-lg" href="https://github.com/jtblin/angular-chart"><i class="icon-github"></i>Code on Github</a>
          <a class="btn btn-success btn-lg" href="../dist/angular-chart.js.tar.gz" download="angular-chart.js.tar.gz">
            <i class="fa fa-download"></i> Download <small>(1.1.1)</small>
          </a>
        </p>
      </div>
    </div>
  </div>
  <div class="container">
    <section id="getting_started">
      <div class="page-header">
        <h1>Getting started</h1>
      </div>
      <h3>Dependencies</h3>
      <p>
        This repository contains a set of <strong>native AngularJS directives</strong> for Chart.js. The <strong>only required dependencies</strong> are:
      </p>
      <ul>
        <li><a href="http://angularjs.org" target="_blank">AngularJS</a> (requires at least 1.4.x)</li>
        <li><a href="http://chartjs.org" target="_blank">Chart.js</a> (requires Chart.js 2.x).</li>
      </ul>
      <h3>Files to download</h3>
      <p>
        The easiest is to download with <strong>npm</strong>:
        <pre>npm install angular-chart.js --save</pre>
        Alternatively files can be <a href="https://github.com/jtblin/angular-chart.js">downloaded from Github</a> or via PolarArea.
        See <a href="https://github.com/jtblin/angular-chart.js">readme</a> for more information.
      </p>
      <p>Whichever method you choose the good news is that the overall size is very small:
        &lt;5kb for all directives (~1kb with gzip compression!)</p>
      <h3>Installation</h3>
      <p>You need to include the dependencies in your page:</p>
      <pre><code>&lt;script src="node_modules/chart.js/Chart.min.js">&lt;/script&gt;
&lt;script src="node_modules/angular-chart.js/dist/angular-chart.min.js">&lt;/script&gt;</code></pre>
      <p>As soon as you've got all the files downloaded and included in your page you just need to declare
        a dependency on the <code>chart.js</code> <a href="http://docs.angularjs.org/guide/module">module</a>:<br>
      </p><pre><code>angular.module('myModule', ['chart.js']);</code></pre>
      <p></p>
      <h3>CSS</h3>
      <p></p>
      <h3>Colors</h3>
      <p>Series have beautiful pre-sets colors (to a maximum of 7 series, after that colors will be randomly generated).
        They can be overwritten using <code>Chart.defaults.global.colors</code>.</p>
      <ol class="chart-legend">
        <li><span style="background-color: rgba(151,187,205,1)"></span>Blue</li>
        <li><span style="background-color: rgba(220,220,220,1)"></span>Light grey</li>
        <li><span style="background-color: rgba(247,70,74,1)"></span>Red</li>
        <li><span style="background-color: rgba(70,191,189,1)"></span>Green</li>
        <li><span style="background-color: rgba(253,180,92,1)"></span>Yellow</li>
        <li><span style="background-color: rgba(148,159,177,1)"></span>Grey</li>
        <li><span style="background-color: rgba(77,83,96,1)"></span>Dark Grey</li>
      </ol>
      <p>You can also use the provider : <code>ChartJsProvider</code> in a <code>.config()</code></p>
      <p><pre><code>(function (ChartJsProvider) {
  ChartJsProvider.setOptions({ colors : [ '#803690', '#00ADF9', '#DCDCDC', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'] });
}); </code></pre></p>
    </section>
    <section id="directives">
      <div class="page-header">
        <h1>Directives</h1>
      </div>
      <div class="row">
        <div class="col-lg-6 col-sm-12" id="line-chart" ng-controller="LineCtrl">
          <div class="panel panel-default">
            <div class="panel-heading">Line Chart</div>
            <div class="panel-body">
              <canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels"
                      chart-click="onClick" chart-hover="onHover" chart-series="series" chart-options="options"
                      chart-dataset-override="datasetOverride"></canvas>
            </div>
          </div>
        </div>
        <div class="col-lg-6 col-sm-12 code">
          <tabset>
            <tab heading="Settings" class="settings">
              <div class="settings">
                <code>.chart-line</code>
                <ul>
                  <li><code>chart-data</code>: series data</li>
                  <li><code>chart-labels</code>: x axis labels</li>
                  <li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
                  <li><code>chart-series</code> (default: <code>[]</code>): series labels</li>
                  <li><code>chart-click</code> (optional): onclick event handler</li>
                  <li><code>chart-hover</code> (optional): onmousemove event handler</li>
                  <li><code>chart-colors</code> (default to global colors): colors for the chart</li>
                  <li><code>chart-dataset-override</code> (optional): override datasets individually</li>
                </ul>
              </div>
            </tab>
            <tab heading="Markup">
            <pre><code data-language="html">&lt;canvas id=&quot;line&quot; class=&quot;chart chart-line&quot; chart-data=&quot;data&quot;
chart-labels=&quot;labels&quot; chart-series=&quot;series&quot; chart-options=&quot;options&quot;
chart-dataset-override=&quot;datasetOverride&quot; chart-click=&quot;onClick&quot;&gt;
&lt;/canvas&gt;</code></pre>
            </tab>
            <tab heading="Javascript">
              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("LineCtrl", function ($scope) {

  $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
  $scope.series = ['Series A', 'Series B'];
  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];
  $scope.onClick = function (points, evt) {
    console.log(points, evt);
  };
  $scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
  $scope.options = {
    scales: {
      yAxes: [
        {
          id: 'y-axis-1',
          type: 'linear',
          display: true,
          position: 'left'
        },
        {
          id: 'y-axis-2',
          type: 'linear',
          display: true,
          position: 'right'
        }
      ]
    }
  };
});
              </code></pre>
            </tab>
          </tabset>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-6 col-sm-12 code">
          <tabset>
            <tab heading="Settings" class="settings">
              <div class="settings">
                <code>.chart-bar</code>
                <ul>
                  <li><code>chart-data</code>: series data</li>
                  <li><code>chart-labels</code>: x axis labels</li>
                  <li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
                  <li><code>chart-series</code> (default: <code>[]</code>): series labels</li>
                  <li><code>chart-click</code> (optional): onclick event handler</li>
                  <li><code>chart-hover</code> (optional): onmousemove event handler</li>
                  <li><code>chart-colors</code> (default to global colors): colors for the chart</li>
                  <li><code>chart-dataset-override</code> (optional): override datasets individually</li>
                </ul>
              </div>
            </tab>
            <tab heading="Markup">
              <pre><code data-language="html">&lt;canvas id=&quot;bar&quot; class=&quot;chart chart-bar&quot;
  chart-data=&quot;data&quot; chart-labels=&quot;labels&quot;&gt; chart-series=&quot;series&quot;
&lt;/canvas&gt;</code></pre>
            </tab>
            <tab heading="Javascript">
              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) {
  $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  $scope.series = ['Series A', 'Series B'];

  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];
});
              </code></pre>
            </tab>
          </tabset>
        </div>
        <div class="col-lg-6 col-sm-12" id="bar-chart" ng-controller="BarCtrl">
          <div class="panel panel-default">
            <div class="panel-heading">Bar Chart</div>
            <div class="panel-body">
              <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels"
                      chart-series="series" chart-options="options"></canvas>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-6 col-sm-12" id="doughnut-chart" ng-controller="DoughnutCtrl">
          <div class="panel panel-default">
            <div class="panel-heading">Doughnut Chart</div>
            <div class="panel-body">
              <canvas id="doughnut" class="chart chart-doughnut chart-xs" chart-data="data"
                      chart-labels="labels"></canvas>
            </div>
          </div>
        </div>
        <div class="col-lg-6 col-sm-12 code">
          <tabset>
            <tab heading="Settings" class="settings">
              <div class="settings">
                <code>.chart-doughnut</code>
                <ul>
                  <li><code>chart-data</code>: series data</li>
                  <li><code>chart-labels</code>: series labels</li>
                  <li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
                  <li><code>chart-click</code> (optional): onclick event handler</li>
                  <li><code>chart-hover</code> (optional): onmousemove event handler</li>
                  <li><code>chart-colors</code> (default to global colors): colors for the chart</li>
                  <li><code>chart-dataset-override</code> (optional): override datasets individually</li>
                </ul>
              </div>
            </tab>
            <tab heading="Markup">
              <pre><code data-language="html">&lt;canvas id=&quot;doughnut&quot; class=&quot;chart chart-doughnut&quot;
  chart-data=&quot;data&quot; chart-labels=&quot;labels&quot;&gt;
&lt;/canvas&gt; </code></pre>
            </tab>
            <tab heading="Javascript">
              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("DoughnutCtrl", function ($scope) {
  $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
  $scope.data = [300, 500, 100];
});
              </code></pre>
            </tab>
          </tabset>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-6 col-sm-12 code">
          <tabset>
            <tab heading="Settings" class="settings">
              <div class="settings">
                <code>.chart-radar</code>
                <ul>
                  <li><code>chart-data</code>: series data</li>
                  <li><code>chart-labels</code>: series labels</li>
                  <li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
                  <li><code>chart-series</code> (default: <code>[]</code>): series labels</li>
                  <li><code>chart-click</code> (optional): onclick event handler</li>
                  <li><code>chart-hover</code> (optional): onmousemove event handler</li>
                  <li><code>chart-colors</code> (default to global colors): colors for the chart</li>
                  <li><code>chart-dataset-override</code> (optional): override datasets individually</li>
                </ul>
              </div>
            </tab>
            <tab heading="Markup">
              <pre><code data-language="html">&lt;canvas id=&quot;radar&quot; class=&quot;chart chart-radar&quot;
  chart-data=&quot;data&quot; chart-options=&quot;options&quot; chart-labels=&quot;labels&quot;&gt;
&lt;/canvas&gt; </code></pre>
            </tab>
            <tab heading="Javascript">
              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("RadarCtrl", function ($scope) {
  $scope.labels =["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"];

  $scope.data = [
    [65, 59, 90, 81, 56, 55, 40],
    [28, 48, 40, 19, 96, 27, 100]
  ];
});
              </code></pre>
            </tab>
          </tabset>
        </div>
        <div class="col-lg-6 col-sm-12" id="radar-chart" ng-controller="RadarCtrl">
          <div class="panel panel-default">
            <div class="panel-heading">Radar Chart</div>
            <div class="panel-body">
              <canvas id="area" class="chart chart-radar" chart-data="data"
                      chart-labels="labels" chart-options="options" chart-click="onClick"></canvas>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-6 col-sm-12" id="pie-chart" ng-controller="PieCtrl">
          <div class="panel panel-default">
            <div class="panel-heading">Pie Chart</div>
            <div class="panel-body">
              <canvas id="pie" class="chart chart-pie chart-xs" chart-data="data"
                      chart-labels="labels" chart-options="options"></canvas>
            </div>
          </div>
        </div>
        <div class="col-lg-6 col-sm-12 code">
          <tabset>
            <tab heading="Settings" class="settings">
              <div class="settings">
                <code>.chart-pie</code>
                <ul>
                  <li><code>chart-data</code>: series data</li>
                  <li><code>chart-labels</code>: series labels</li>
                  <li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
                  <li><code>chart-click</code> (optional): onclick event handler</li>
                  <li><code>chart-hover</code> (optional): onmousemove event handler</li>
                  <li><code>chart-colors</code> (default to global colors): colors for the chart</li>
                  <li><code>chart-dataset-override</code> (optional): override datasets individually</li>
                </ul>
              </div>
            </tab>
            <tab heading="Markup">
              <pre><code data-language="html">&lt;canvas id=&quot;pie&quot; class=&quot;chart chart-pie&quot;
  chart-data=&quot;data&quot; chart-labels=&quot;labels&quot; chart-options=&quot;options&quot;&gt;
&lt;/canvas&gt; </code></pre>
            </tab>
            <tab heading="Javascript">
              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("PieCtrl", function ($scope) {
  $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
  $scope.data = [300, 500, 100];
});
              </code></pre>
            </tab>
          </tabset>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-6 col-sm-12 code">
          <tabset>
            <tab heading="Settings" class="settings">
              <div class="settings">
                <code>.chart-polar-area</code>
                <ul>
                  <li><code>chart-data</code>: series data</li>
                  <li><code>chart-labels</code>: series labels</li>
                  <li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
                  <li><code>chart-click</code> (optional): onclick event handler</li>
                  <li><code>chart-hover</code> (optional): onmousemove event handler</li>
                  <li><code>chart-colors</code> (default to global colors): colors for the chart</li>
                  <li><code>chart-dataset-override</code> (optional): override datasets individually</li>
                </ul>
              </div>
            </tab>
            <tab heading="Markup">
              <pre><code data-language="html">&lt;canvas id=&quot;polar-area&quot; class=&quot;chart chart-polar-area&quot;
  chart-data=&quot;data&quot; chart-labels=&quot;labels&quot; chart-options=&quot;options&quot;&gt;
&lt;/canvas&gt; </code></pre>
            </tab>
            <tab heading="Javascript">
              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("PolarAreaCtrl", function ($scope) {
  $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"];
  $scope.data = [300, 500, 100, 40, 120];
});
              </code></pre>
            </tab>
          </tabset>
        </div>
        <div class="col-lg-6 col-sm-12" id="polar area-chart" ng-controller="PolarAreaCtrl">
          <div class="panel panel-default">
            <div class="panel-heading">Polar Area Chart</div>
            <div class="panel-body">
              <canvas id="polar" class="chart chart-polar-area" chart-data="data"
                      chart-labels="labels" chart-options="options"></canvas>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-6 col-sm-12" id="horizontal bar-chart" ng-controller="BarCtrl">
          <div class="panel panel-default">
            <div class="panel-heading">Horizontal Bar Chart</div>
            <div class="panel-body">
              <canvas id="horizontal" class="chart chart-horizontal-bar" chart-data="data"
                      chart-labels="labels"></canvas>
            </div>
          </div>
        </div>
        <div class="col-lg-6 col-sm-12 code">
          <tabset>
            <tab heading="Settings" class="settings">
              <div class="settings">
                <code>.chart-horizontal-bar</code>
                <ul>
                  <li><code>chart-data</code>: series data</li>
                  <li><code>chart-labels</code>: x axis labels</li>
                  <li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
                  <li><code>chart-series</code> (default: <code>[]</code>): series labels</li>
                  <li><code>chart-click</code> (optional): onclick event handler</li>
                  <li><code>chart-hover</code> (optional): onmousemove event handler</li>
                  <li><code>chart-colors</code> (default to global colors): colors for the chart</li>
                  <li><code>chart-dataset-override</code> (optional): override datasets individually</li>
                </ul>
              </div>
            </tab>
            <tab heading="Markup">
              <pre><code data-language="html">&lt;canvas id=&quot;base&quot; class=&quot;chart-horizontal-bar&quot;
  chart-data=&quot;data&quot; chart-labels=&quot;labels&quot; &gt;
&lt;/canvas&gt; </code></pre>
            </tab>
            <tab heading="Javascript">
              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("BarCtrl",
  function ($scope) {
    $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
    $scope.series = ['Series A', 'Series B'];

    $scope.data = [
      [65, 59, 80, 81, 56, 55, 40],
      [28, 48, 40, 19, 86, 27, 90]
    ];
});
              </code></pre>
            </tab>
          </tabset>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-6 col-sm-12 code">
          <tabset>
            <tab heading="Settings" class="settings">
              <div class="settings">
                <code>.chart-bubble</code>
                <ul>
                  <li><code>chart-data</code>: series data</li>
                  <li><code>chart-labels</code>: x axis labels</li>
                  <li><code>chart-options</code> (default: <code>{}</code>): Chart.js options</li>
                  <li><code>chart-series</code> (default: <code>[]</code>): series labels</li>
                  <li><code>chart-click</code> (optional): onclick event handler</li>
                  <li><code>chart-hover</code> (optional): onmousemove event handler</li>
                  <li><code>chart-colors</code> (default to global colors): colors for the chart</li>
                  <li><code>chart-dataset-override</code> (optional): override datasets individually</li>
                </ul>
              </div>
            </tab>
            <tab heading="Markup">
              <pre><code data-language="html"><!--see examples/bubble.html for random bubbles source code-->
&lt;canvas id=&quot;base&quot; class=&quot;chart-bubble&quot; chart-data=&quot;data&quot;
  chart-series=&quot;series&quot; &gt;
&lt;/canvas&gt; </code></pre>
            </tab>
            <tab heading="Javascript">
              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("BubbleCtrl",
  function ($scope) {
    // see examples/bubble.js for random bubbles source code
    $scope.series = ['Series A', 'Series B'];

    $scope.data = [
      [{
        x: 40,
        y: 10,
        r: 20
      }],
      [{
        x: 10,
        y: 40,
        r: 50
      }]
    ];
});
              </code></pre>
            </tab>
          </tabset>
        </div>
        <div class="col-lg-6 col-sm-12" id="bubble-chart" ng-controller="BubbleCtrl">
          <div class="panel panel-default">
            <div class="panel-heading">Bubble Chart</div>
            <div class="panel-body">
              <canvas id="bubble" class="chart chart-bubble" chart-data="data" chart-options="options"></canvas>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-6 col-sm-12" id="base-chart" ng-controller="BaseCtrl">
          <div class="panel panel-default">
            <div class="panel-heading">Dynamic Chart</div>
            <div class="panel-body">
              <canvas id="base" class="chart chart-base" chart-type="type" chart-data="data"
                      chart-labels="labels"></canvas>
            </div>
          </div>
          <button type="button" class="btn btn-primary pull-right" ng-click="toggle()">Toggle</button>
        </div>
        <div class="col-lg-6 col-sm-12 code">
          <tabset>
            <tab heading="Settings" class="settings">
              <div class="settings">
                <code>.chart-base</code>
                <ul>
                  <li><code>chart-type</code>: chart type e.g. bar, polarArea, etc. or other plugins</li>
                  <li>other options according to chart type</li>
                </ul>
              </div>
            </tab>
            <tab heading="Markup">
              <pre><code data-language="html">&lt;canvas id=&quot;base&quot; class=&quot;chart-base&quot; chart-type=&quot;type&quot;
  chart-data=&quot;data&quot; chart-labels=&quot;labels&quot; &gt;
&lt;/canvas&gt; </code></pre>
            </tab>
            <tab heading="Javascript">
              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("BaseCtrl",
  function ($scope) {
    $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"];
    $scope.data = [300, 500, 100, 40, 120];
    $scope.type = 'polarArea';

    $scope.toggle = function () {
      $scope.type = $scope.type === 'polarArea' ?
        'pie' : 'polarArea';
    };
});
              </code></pre>
            </tab>
          </tabset>
        </div>
      </div>
    </section>
    <section id="reactive">
      <div class="page-header">
        <h1>Reactive</h1>
        <p>All charts are reactive and will update automatically when data changes.</p>
      </div>
      <div class="row" ng-controller="DataTablesCtrl">
        <div class="col-lg-6 col-sm-12">
          <div class="panel panel-default">
            <div class="panel-heading">Reactive Chart</div>
            <div class="panel-body">
              <canvas id="tables" class="chart chart-line" chart-data="data" chart-options="options"
                      chart-labels="labels" chart-colors="colors"></canvas>
            </div>
          </div>
        </div>
        <div class="col-lg-6 col-sm-12">
          <div class="panel panel-default">
            <div class="panel-heading">Chart Data</div>
            <div class="panel-body">
              <table class="table table-responsive table-condensed table-striped">
                <tr>
                  <th ng-repeat="label in labels">{{label}}</th>
                </tr>
                <tr ng-repeat="dataSet in data">
                  <td ng-repeat="set in dataSet track by $index"><span style="text-align: right;">{{data[$parent.$index][$index]}}</span></td>
                </tr>
              </table>
              <button type="button" class="btn btn-primary pull-right" ng-click="randomize()">Randomize</button>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section id="mixed">
      <div class="page-header">
        <h1>Mixed type charts</h1>
        <p>It is possible to combine multiple types of charts on the same canvas e.g. bar and line.</p>
      </div>
      <div class="row" ng-controller="MixedChartCtrl">
        <div class="col-lg-6 col-sm-12 code">
          <tabset>
            <tab heading="Markup">
              <pre><code data-language="html">&lt;canvas id=&quot;base&quot; class=&quot;chart-bar&quot;
  chart-data=&quot;data&quot; chart-labels=&quot;labels&quot; chart-colors=&quot;colors&quot;
  chart-dataset-override=&quot;datasetOverride&quot; &gt;
&lt;/canvas&gt; </code></pre>
            </tab>
            <tab heading="Javascript">
              <pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("MixedChartCtrl",
  function ($scope) {
    $scope.colors = ['#45b7cd', '#ff6384', '#ff8e72'];

    $scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
    $scope.data = [
      [65, -59, 80, 81, -56, 55, -40],
      [28, 48, -40, 19, 86, 27, 90]
    ];
    $scope.datasetOverride = [
      {
        label: "Bar chart",
        borderWidth: 1,
        type: 'bar'
      },
      {
        label: "Line chart",
        borderWidth: 3,
        hoverBackgroundColor: "rgba(255,99,132,0.4)",
        hoverBorderColor: "rgba(255,99,132,1)",
        type: 'line'
      }
    ];
});
              </code></pre>
            </tab>
          </tabset>
        </div>
        <div class="col-lg-6 col-sm-12">
          <div class="panel panel-default">
            <div class="panel-heading">Bar line Chart</div>
            <div class="panel-body">
              <canvas class="chart chart-bar" chart-data="data" chart-labels="labels"
                      chart-colors="colors" chart-dataset-override="datasetOverride"></canvas>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
  <footer class="footer">
    <div class="container">
      <p>Designed and built by <a href="https://github.com/jtblin" target="_blank">Jerome Touffe-Blin</a></p>
      <p>Code licensed under <a href="https://github.com/jtblin/angular-chart.js/blob/master/LICENSE">BSD License</a>.</p>
      <p><a href="https://github.com/jtblin/angular-chart.js/issues?state=open">Issues</a></p>
      <p><strong>Credits</strong>: <a href="http://www.chartjs.org/">Chart.js</a> and <a href="https://angularjs.org/">AngularJS</a></p>
    </div>
  </footer>

  <script src="../node_modules/angular/angular.min.js"></script>
  <script src="../node_modules/chart.js/dist/Chart.min.js"></script>
  <script src="../node_modules/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
  <script src="../node_modules/rainbow-code/dist/rainbow.min.js"></script>
  <script src="../node_modules/rainbow-code/src/language/generic.js"></script>
  <script src="../node_modules/rainbow-code/src/language/html.js"></script>
  <script src="../node_modules/rainbow-code/src/language/javascript.js"></script>
  <script src="../angular-chart.js"></script>
  <script src="smoothscroll.min.js"></script>
  <script src="app.js"></script>
</body>
</html>
